iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
Modern Web

JS讀書筆記系列 第 26

JS讀書筆記30天 - Day26 Bootstrap的Class設定3

  • 分享至 

  • xImage
  •  

表單

一般input、textarea、select(包含多重選擇)

結構

  1. 最外層:Class中加上form-group,作用為調整間距。
  2. <label>上:不加BS4的Class
  3. <input>本身:Class中加上form-control
  4. <small>上:加form-text,作用為調整間距。

ex:

<div class="form-group">
  <label for="test">LABEL</label>
  <input type="email" id="test">
  <small>測試</small>
</div>

注意事項

  1. 可以自由選擇是否要加<small>,不一定需要使用<small>
  2. input中的type要寫清楚
  3. 多重選擇時,<select>中加入屬性multiple

checkbox、radio

結構

  1. 最外層:Class中加上form-check,作用為調整間距。
  2. <input>本身:Class中加上form-check-input
  3. <label>上:Class中加上form-check-label

ex:

<div class="form-group">
  <input type="checkbox" id="test">
  <label for="test">LABEL</label>
</div>

注意事項

  1. 注意<input><label>順序不要出錯
  2. 當多個選項想排在同一行時,在form-check後加form-check-inline來實現

上一篇
JS讀書筆記30天 - Day25 Bootstrap的Class設定2
下一篇
JS讀書筆記30天 - Day27 Vue的前置工作與開發者工具
系列文
JS讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言